<template>
  <div class="app-container">
    <div style="padding: 10px 0;">
      <el-form
        :model="filters"
        :inline="true"
      >
        <el-form-item label="银行类别" prop="channelId">
          <el-select v-model="filters.bankId" @change="doAction({type:'get',action:'getGrid'})">
            <el-option
              v-for="o in bankList"
              :label="o.bankName"
              :value="o.bankId"
              :key="o.bankId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付类型" prop="limitType">
          <el-select v-model="filters.limitType" placeholder="请存款类型"  @change="doAction({type:'get',action:'getGrid'})">
            <el-option label="全部" :value="-1">全部</el-option>
            <el-option label="普通渠道" :value="0"></el-option>
            <el-option label="大额渠道" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-button
          type="primary"
          v-if="roleCheck(payBankSetType.add)"
          @click="openDialog({dialogName: dialogType.addBank, props: {}})"
        >
          新增银行卡支付
        </el-button>
      </el-form>
    </div>
    <el-table border :data="tableData.list" v-loading="loading" element-loading-text="加载中..."
              class="el-table-align-center">
      <el-table-column label="序号" type="index" width="80px"></el-table-column>
      <el-table-column label="银行名称" prop="bankName" min-width="100" align="center">
      </el-table-column>
      <el-table-column label="银行卡号/二维码" prop="cardNo" min-width="180" align="center">
        <template slot-scope="{row}">
          <span v-if="row.bankId !== 101">
          {{row.cardNo}}
          </span>
          <img style="width: 180px;" v-else :src="row.cardNo" />
        </template>
      </el-table-column>
      <el-table-column label="开户支行" prop="bankBranchName" min-width="100" align="center">
      </el-table-column>
      <el-table-column label="开户人姓名" prop="name" width="120" align="center">
      </el-table-column>

      <!--<el-table-column label="状态" prop="status" width="100" align="center">-->
        <!--<template slot-scope="{row}">-->
          <!--{{row.status | toConverter('ESCROWS_STATUS')}}-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column label="收款上限" prop="dailyLimit" width="100" align="center">
      </el-table-column>
      <el-table-column label="支付类型" width="90" align="center">
        <template slot-scope="{row}">
          {{row.limitType === 0  ? '普通存款' : '大额存款'}}
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" width="100" align="center">
      </el-table-column>
      <el-table-column label="操作" width="180px" align="center" fixed="right">
        <template slot-scope="{row}">
          <!--<el-button type="text" @click="toggleBank(row, 'open')" v-if="row.status ===1 ">上架</el-button>-->
          <!--<el-button type="text" @click="toggleBank(row, 'close')" v-else-if="row.status ===0">下架</el-button>-->
          <el-button
            type="text"
            v-if="roleCheck(payBankSetType.edit)"
            @click="openDialog({dialogName: dialogType.addBank, props: row })"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            v-if="roleCheck(payBankSetType.delete)"
            @click="toggleBank(row, 'del')"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
    <BankEditDialog
      v-if="dialogName === dialogType.addBank"
      v-model="dialogVisible"
      :row-data="dialogProps"
      :id="dialogProps.id"
      @submit="submitFinished"/>
  </div>
</template>


<script>

// constants
import { payBankSetType } from '@/router/payRoutes';

// services
import { delPaymentCard, updatePaymentCardStatus } from '@/services/api/payment';
import { getPayeeBankList, getBankCardList } from '@/services/api/recharge';

// mixins
import { grid, constsLabel, dialog } from '@/build';

// components
import BankEditDialog from './bankEditDialog';

const dialogType = {
  addBank: 'bank-edit-dialog',
};

export default {
  name: 'bank-edit-dialog',
  components: {
    BankEditDialog,
  },
  mixins: [grid, constsLabel, dialog],
  data() {
    return {
      payBankSetType,
      tableData: {},
      bankList: [],
      filters: {
        bankId: -1,
        limitType: -1,
      },
      dialogType,
    };
  },
  methods: {
    toggleBank({ cardId, status }, tag = 'open') {
      let display = '';
      switch (tag) {
        case 'open':
          display = '上架';
          status = 0;
          break;
        case 'close':
          display = '下架';
          status = 1;
          break;
        case 'del':
          display = '删除';
          break;
        default:
          break;
      }

      this.$confirm(`确定要${display}此银行卡支付吗？`, `${display}银行卡支付`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        if (tag === 'del') {
          this.delCard({ cardId });
        } else {
          this.updateStatus({ cardId, status });
        }
      })
        .catch(() => {
        });
    },

    delCard({ cardId }) {
      delPaymentCard({ cardId }).then(([result]) => {
        if (result) {
          this.gridSearch();
          this.$notify({
            type: 'success',
            message: '删除成功',
          });
        }
      });
    },

    updateStatus({ cardId, status }) {
      updatePaymentCardStatus({ cardId, status }).then(([result]) => {
        if (result) {
          this.gridSearch();
          this.$notify({
            type: 'success',
            message: '状态修改成功',
          });
        }
      });
    },
  },
  mounted() {
    this.bindGet(getPayeeBankList, 'bankList', {
      format: (data) => {
        data.unshift({ bankId: -1, bankName: '全部' });
        return data;
      },
    });
    this.bindGet(getBankCardList, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
    });
    this.getAll();
  },
};
</script>

<style lang="scss" scoped>
  .el-table-align-center {
    &.el-table {
      width: 100%;
      text-align: center !important;
      th {
        text-align: center !important;
      }
    }
  }

</style>
